<template>
  <div>
    <div v-show="!showProdDetail">
      <jxf-titletip :title="title" @refreshPage="refreshPage"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchForm">
          <el-form-item label="商品名称:" prop="productName">
            <el-input v-model="searchInfo.productName"
                      @keyup.enter.native="$refs['productNo'].focus()" clearable></el-input>
          </el-form-item>
          <!--<el-form-item label="编号:" prop="productNo">-->
          <!--<el-input v-model="searchInfo.productNo" ref="productNo"-->
          <!--@keyup.enter.native="$refs['enterpriseName'].focus()" clearable></el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="供应商名称:" prop="enterpriseName">
            <el-input v-model="searchInfo.enterpriseName" ref="enterpriseName"
                      @keyup.enter.native="$refs['brand'].focus()" clearable></el-input>
          </el-form-item>
          <el-form-item label="品牌:" prop="brand">
            <el-input v-model="searchInfo.brand" clearable></el-input>
          </el-form-item>
          <el-form-item label="所属城市:" prop="cityId">
            <el-select v-model="searchInfo.cityId" placeholder="全部" filterable clearable>
              <el-option
                v-for="item in cityList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品分类:" prop="firstClassifyId">
            <el-select v-model="searchInfo.firstClassifyId" placeholder="全部" clearable>
              <el-option
                v-for="item in firstClassifyList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="searchInfo.secClassifyId" placeholder="全部" clearable>
              <el-option
                v-for="item in secClassifyList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="searchInfo.thiClassifyId" placeholder="全部" clearable>
              <el-option
                v-for="item in thiClassifyList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="销售状态:" prop="status">
            <el-select v-model="searchInfo.status" placeholder="全部" clearable>
              <el-option
                v-for="item in saleStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="exportInfo" :loading="isSuccess">导出为Excel</el-button>
          </div>
        </div>
        <jxf-table :table="tableInfo">
          <template slot="picUrl" slot-scope="scope">
            <viewer class="imgCenter" :images="[scope.row.picUrl]">
              <img :src="scope.row.picUrl" alt="">
            </viewer>
          </template>
          <template slot="status" slot-scope="scope">
            <span>{{(scope.row.isShelf === 2 && (scope.row.status === 0 || scope.row.status === 5))? "商户下架": (scope.row.isShelf === 2 && scope.row.status === 4) ?"强制下架": (scope.row.isShelf === 1 && (scope.row.status === 0 || scope.row.status === 5)) ? "在售":""}}</span>
          </template>
          <template slot="operation" slot-scope="scope">
            <el-button type="text" @click="showProductDetail(scope.row)">查看详情</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <ShowProductDetail ref="showProduct" v-show="showProdDetail" :showProdDetail.sync="showProdDetail"
                       @getProductList="getProductList"></ShowProductDetail>
  </div>
</template>

<script>
  import ShowProductDetail from './components/ShowProductDetail'

  export default {
    name: "ProductList",
    components: {ShowProductDetail},
    data() {
      return {
        title: "商品列表",
        cityList: [],
        saleStatusList: [{
          label: "在售",
          value: 5
        }, {
          label: "商户下架",
          value: 2
        }, {
          label: "强制下架",
          value: 4
        }],
        isSuccess: false,
        firstClassifyList:[],
        secClassifyList:[],
        thiClassifyList:[],
        searchInfoBack: {
          productName: '',
          // productNo: '',
          enterpriseName: '',
          brand: '',
          cityId: null,
          status: null,
          firstClassifyId: null,
          secClassifyId: null,
          thiClassifyId: null
        },
        searchInfo: {
          productName: '',
          // productNo: '',
          enterpriseName: '',
          brand: '',
          cityId: null,
          status: null,
          firstClassifyId: null,
          secClassifyId: null,
          thiClassifyId: null
        },
        tableInfo: {},
        showProdDetail: false,
        currentPage: 1,
        pageSize: 10,
        pageTotal: 0,
        productId: null
      }
    },
    watch:{
      "searchInfo.firstClassifyId":{
        handler:function (val) {
          this.searchInfo.secClassifyId = null
          this.searchInfo.thiClassifyId = null
          this.secClassifyList = []
          this.thiClassifyList = []
          this.getProductType({id:val,type:2})
        }
      },
      "searchInfo.secClassifyId":{
        handler:function (val) {
          this.searchInfo.thiClassifyId = null
          this.thiClassifyList = []
          this.getProductType({id:val,type:3})
        }
      }
    },
    methods: {
      // 表单初始化
      init() {
        this.tableInfo = {
          border: true,
          loading: true,
          tr: [
            // {
            //   id: '1',
            //   label: '编号',
            //   prop: 'productNo'
            // },
            {
              id: '2',
              label: '商品图片',
              prop: 'picUrl',
              show: 'template'
            },
            {
              id: '3',
              label: '商品名称',
              prop: 'productName'
            },
            {
              id: '4',
              label: '商品标准名称',
              minWidth: "110",
              prop: 'standardName'
            },
            {
              id: '5',
              label: '供应商名称',
              minWidth: "100",
              prop: 'enterpriseName'
            },
            {
              id: '6',
              label: '最小分类',
              prop: 'classifyName'
            },
            {
              id: '7',
              label: '规格',
              prop: 'specifications'
            },
            {
              id: '8',
              label: '产地',
              prop: 'productAddress'
            },
            {
              id: '9',
              label: '品牌',
              prop: 'brand'
            },
            {
              id: '10',
              label: '生产商',
              prop: 'producer'
            },
            {
              id: '11',
              label: '售价',
              minWidth: '120',
              prop: 'price'
            },
            {
              id: '12',
              label: '销售状态',
              show: 'template',
              width: '80',
              prop: 'status'
            },
            {
              id: '13',
              label: '操作',
              prop: 'operation',
              show: 'template',
              width: "90",
              fixed: "right"
            }
          ],
          data: []
        }
      },
      // 获取城市列表
      getCityList() {
        ajax.post(apis.product.getCityById,{type:5})
          .then(res => {
            if (res.success === true && res.data !== []) {
              this.cityList = res.data.map(item => {
                return {
                  label: item.name,
                  value: item.id
                }
              })
            }
          })
      },
      // 获取商品分类
      getProductType(info) {
        ajax.post(apis.product.getProductType,info)
          .then(res => {
            if (res.success === true) {
              if (info.type === 1) {
                if (res.data !== [] && res.data !== null) {
                  this.firstClassifyList = res.data.map(item => {
                    return {
                      label: item.classifyName,
                      value: item.id
                    }
                  })
                }else{
                  this.firstClassifyList = []
                }
              }else if (info.type === 2){
                if (res.data !== [] && res.data !== null) {
                  this.secClassifyList = res.data.map(item => {
                    return {
                      label: item.classifyName,
                      value: item.id
                    }
                  })
                }else{
                  this.secClassifyList = []
                }
              } else{
                if (res.data !== [] && res.data !== null) {
                  this.thiClassifyList = res.data.map(item => {
                    return {
                      label: item.classifyName,
                      value: item.id
                    }
                  })
                }else{
                  this.thiClassifyList = []
                }
              }
            }
          })
      },
      // 获取商品列表
      getProductList() {
        let info = {...this.searchInfo, pageSize: this.pageSize, pageNum: this.currentPage}
        ajax.post(apis.product.getProductList, info)
          .then(res => {
            if (res.success === true) {
              this.pageTotal = res.data.total
              if (res.data.dataList !== [] && res.data.dataList !== null) {
                this.tableInfo.data = this.formatData(res.data.dataList)
              } else {
                this.tableInfo.data = []
              }
              this.tableInfo.loading = false
            }
          })
      },
      // 导出
      exportInfo(){
        this.isSuccess = true;
        let info = formatData.clearObjEmptyPrama({...this.searchInfo, pageSize: this.pageSize, pageNum: this.currentPage})
        ajax.export(apis.product.exportProductList, info)
          .then(res => {
            this.isSuccess = false
          })
      },
      // 搜索
      onSearch() {
        this.currentPage = 1
        this.getProductList()
      },
      // 搜索表单重置
      resetForm(formName) {
        // this.$refs[formName].resetFields();
        this.searchInfo = {...this.searchInfoBack}
      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getProductList()
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getProductList()
      },
      // 商品列表数据处理
      formatData(list) {
        return list.map(item => {
          return {
            id: item.id,
            productNo: item.productNo,
            picUrl: item.picUrl,
            productName: item.productName,
            standardName: item.standardName,
            enterpriseName: item.enterpriseName,
            classifyName: item.classifyName,
            specifications: item.specifications,
            productAddress: item.productAddress,
            brand: item.brand,
            producer: item.producer,
            price: item.price,
            isShelf: item.isShelf,
            status: item.status
          }
        })
      },
      // 查看详情
      showProductDetail(row) {
        this.showProdDetail = true
        this.$refs.showProduct.getProductDetail(row.id)
      },
      // 刷新页面
      refreshPage() {
        this.currentPage = 1
        this.pageSize = 10
        this.searchInfo = {...this.searchInfoBack}
        this.getProductList()
      }
    },
    created() {
      this.init()
      this.getCityList()
      this.getProductType({type:1})
      this.getProductList()
    }
  }
</script>

<style lang="scss" scoped>
  .jxf-table-card {
    img {
      width: 50px;
      height: 50px;
    }
    .el-button {
      padding: 0;
    }
  }

</style>
